<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个Ajax程序</title>
		<script>
			// 创建 Ajax 引擎
			function createXmlHttpRequest(){			
				if(window.XMLHttpRequest){
					// 高版本浏览器
					return new XMLHttpRequest() ;
				}else{
					// 兼容低版本浏览器(IE5、IE6以及更低版本的浏览器)
					return new ActiveXObject("Microsoft.XMLHTTP") ;
				}
			}
			function validate(){
				var username = document.getElementById("userName").value ;
				
				//1. 创建了 XMLHttpRequest 对象
				var xmlHttpRequest = createXmlHttpRequest() ;
				//2. 通过 XMLHttpRequest 对象设置请求信息
				xmlHttpRequest.open("GET","existsuser?checkname="+username,true) ;
				//3. 向服务器发送请求  GET 请求,参数一般填 null
				xmlHttpRequest.send(null) ;
				//4. 创建回调函数
				xmlHttpRequest.onreadystatechange = callback ;
				
				// 根据服务器响应状态,来动态更新页面
				function callback(){
					// 判断客户端状态和服务器的状态
					if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200 ){
						// 动态修改DOM元素以及元素样式
						var msg = document.getElementById("msg") ;
						msg.innerHTML="" ;
						if(xmlHttpRequest.responseText == "1"){
							msg.style.display="block" ;
							msg.innerHTML="用户名已被占用" ;
						}else if(xmlHttpRequest.responseText == "0"){
							msg.style.display="block" ;
							msg.innerHTML="用户名可以使用" ;
						}else{
							msg.style.display="none" ;
							msg.innerHTML="" ;
						}
					}
				}
				console.log(xmlHttpRequest) ;
			}
		</script>
	</head>
	<body>
		<form action="" method="post">
			<p>用户名：<input type="text" id="userName" name="userName" onblur="validate()"></p>
			<p id="msg" style="display:none"></p>
			<input type="submit" value="注册" />
		</form>
	</body>
</html>
